<template>
  <el-dialog title="客服列表" :visible.sync="centerDialogVisible" width="900px" center>
    <el-tabs v-model="activeType" @tab-click="handleClick">
      <el-tab-pane v-for="(type,key) in commonMaps.kefuTypeTenantMap" :key="key" :label="type.label" :name="key">
        <div class="kefu-box flex" >
          <template v-if="list&&list.length">
            <div class="item " v-for="item in list" :key="item.id">
              <div class="img">
                <img :src="item.qrCode" alt="" style="width: 100%;">
                <!-- <el-tag >{{ getKefuTypes(item.type) }}</el-tag> -->
              </div>
              <div class="tit flex alc">
                <span class="name">{{ item.name }}</span>
                <span class="sign" v-if="item.workState!=3" :class="{online:item.workState==1}">
                  <span v-if="item.workState==1">在线</span>
                  <span v-else>离线</span>
                </span>
              </div>
              <!-- <div class="val">QQ:{{item.qq}}</div> -->
              <div class="val">微信：{{ item.weixin||'暂无' }}</div>
              <div class="btn" v-if="item.imCustom==2&&item.imSystem==2">
                <!-- <el-button  type="primary" circle @click="copyInfo(item.account)">复制微信</el-button> -->
                <el-button style="padding: 0;" type="primary" circle @click="openQQ(item)">立即联系</el-button>
              </div>
            </div>
          </template>
          <div v-else style="font-size:18px;color:#999;text-align:center;line-height:100px">
            暂未配置客服
          </div>
        </div>
        <div style="color: #999;text-align: center;" v-if="shangjiaxinxi">
          <span>
            联系电话:{{ shangjiaxinxi.lianxishouji||shangjiaxinxi.adminPhonenumber }}
          </span>
          <span style="margin-left: 20px;" v-if="shangjiaxinxi.lianxiweixin">
            微信:{{ shangjiaxinxi.lianxiweixin }}
          </span>
        </div>

      </el-tab-pane>
    </el-tabs>

  </el-dialog>
</template>

<script>
import kefuApi from "../../api/kefu/index";
import { getTenantSomeById } from "@/api/system/shopManage";
export default {
  name: "kefuList",
  data() {
    return {
      activeType: "1",
      centerDialogVisible: false,
      orderInfo: "",
      list: [],
      IMhost: "",
      goodsInfo: "",
      paramsObj: {
        tenantId: "",
        typeArr: null,
        state: "",
        workState: 1,
      },
      gameInfo: {},
      shangjiaxinxi:null
    };
  },
  created() {},
  computed: {
    getKefuTypes() {
      return (str) => {
        let types = "";
        if (str) {
          const arr = str.split(",");
          arr.forEach((r) => {
            if (this.commonMaps.kefuTypeTenantMap[r]) {
              types = types + this.commonMaps.kefuTypeTenantMap[r].label;
            }
          });
        }
        return types;
      };
    },
  },
  methods: {
    // 切换类型
    handleClick() {
      this.paramsObj.typeArr = [this.activeType];
      this.getList();
    },
    // // 获取IM域名
    // async getIMhost() {
    //   const { data } = await getDicts("IMhost");
    //   if (data && data.length) {
    //     this.IMhost = data[0].dictValue;
    //   }
    // },
    open(tenantId, type, gameInfo) {
      this.paramsObj.tenantId = tenantId;
      this.paramsObj.typeArr = type ? [type] : null;
      this.activeType = type ? String(type) : "1";
      // this.orderInfo = row;
      // // 组装商品数据  this.PChost +'/pages/detail/index?id='+row.id
      // let href = '/pages/detail/index?id='+row.id
      // this.goodsInfo = `titleImg@#$${row.titleImg}&&&title@#$${row.des}&&&des@#$${row.des}&&&link@#$${href}&&&id@#$${row.id}`
      this.getList();
      if (gameInfo) {
        this.gameInfo = { ...gameInfo };
      }
    },
    async getList() {
      this.centerDialogVisible = true;
      this.list = [];
      this.loading = true
      // await this.getIMhost()
      const { rows } = await kefuApi.getList(this.paramsObj);
      this.loading = false
      if (rows && rows.length) {
        this.list = rows;
      }
      this.getShopInfoByTenantId()
    },
    // 查询要联系的店铺的联系方式
    async getShopInfoByTenantId(){
      const { data } = await getTenantSomeById({
        tenantId:this.paramsObj.tenantId
      });
      this.shangjiaxinxi = data
      if(!this.list||this.list.length===0){
        this.list = [
          {
            name:this.shangjiaxinxi.adminNickName,
            hxname:this.shangjiaxinxi.adminHxusername,
            qrCode:this.shangjiaxinxi.adminAvatar,
            imCustom:2,
            imSystem:2,
            workState:this.shangjiaxinxi.adminWorkState||3,
          }
        ]
      }
    },
    openQQ(item) {
      if (item.workState != 1&&item.workState != 3) {
        return this.$message.error("该客服不在线，请联系其他客服！");
      }
      const msgExtData = {
        type: 3,
        gameId: this.gameInfo.gameId || "",
        gameName: this.gameInfo.gameName || "",
      };
      let obj = {
        type: "goChat",
        hxusername: item.hxname,
        chatType: "singleChat",
        msgExtData: JSON.stringify(msgExtData),
      };
      // 告诉IM系统，需要跳转聊天页
      this.$store.dispatch("postMsgToIM", obj);
    },
  },
};
</script>
<style scoped lang="scss">
.kefu-box {
  width: 100%;
  min-height: 500px;
  flex-wrap: wrap;
  min-height: 500px;
}

.item {
  width: 180px;
  background: #f2f2f2;
  border-radius: 5px;
  margin-bottom: 10px;
  height: 280px;
  // line-height: 70px;
  padding: 10px;
  overflow: hidden;
  margin-right: 15px;
  text-align: center;
  box-sizing: border-box;
  img {
    height: 160px;
    border-radius: 6px;
  }
  .tit {
    justify-content: center;
    font-size: 16px;
    // font-weight: bold;
    color: #000;
    margin-top: 10px;
    .name{
      max-width: 100px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .sign {
      font-weight: 400;
      font-size: 12px;
      background-color: #999;
      color: #fff;
      padding: 0 6px;
      border-radius: 12px;
      margin-left: 10px;
      &.online {
        background-color: #24a813;
      }
    }
  }

  .val {
    font-weight: 400;
    font-size: 14px;
    padding: 7px 0;
  }

  .el-button {
    width: 150px;
    border-radius: 20px;
  }
}
</style>
